<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>岗位管理</span>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="活动编号">
          <el-input v-model="searchForm.code" placeholder="请输入活动编号" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="渠道来源">
          <el-select v-model="searchForm.channel" placeholder="请选择渠道来源" clearable size="small">
            <el-option label="线上活动" value="0"></el-option>
            <el-option label="推广介绍" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="searchForm.status" placeholder="请选择活动状态" clearable size="small">
            <el-option label="待审核" value="1"></el-option>
            <el-option label="已通过" value="2"></el-option>
            <el-option label="已驳回" value="3"></el-option>
            <el-option label="已结束" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="dateRange"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动时间：">
          <el-date-picker
            v-model="dateRange2"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom: 10px" @click="handleAdd">添加</el-button>
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="code" label="活动编号" width="80px"></el-table-column>
        <el-table-column prop="channel" label="渠道来源"></el-table-column>
        <el-table-column prop="info" label="活动简介"></el-table-column>
        <el-table-column label="活动明细">
          <template slot-scope="scope">
              <span>{{ scope.row.type==1?"课程折扣":"课程代金券" }}/{{ scope.row.type==1?scope.row.discount+'折':scope.row.vouchers+'元' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="beginTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="status" label="状态" width="80px">
          <template slot-scope="scope">
             <span v-if="scope.row.status==1">待审核</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
            <el-button size="mini" @click="handlePass(scope.$index, scope.row)">
              通过
            </el-button>
            <el-button size="mini" type="danger" @click="handleReject(scope.$index, scope.row)">
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>

      <el-dialog :title="saveForm.id==null?'新增活动':'修改活动'" :visible.sync="dialogFormVisible">
        <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="100px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="saveForm.name" autocomplete="off" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="渠道来源" prop="channel">
            <el-select v-model="saveForm.channel" placeholder="请选择渠道来源" clearable size="small">
              <el-option label="线上活动" value="0"></el-option>
              <el-option label="推广介绍" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型" prop="type">
            <el-select v-model="saveForm.type" placeholder="请选择活动类型" clearable size="small">
              <el-option label="课程折扣" value="1"></el-option>
              <el-option label="课程代金券" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动折扣" v-if="saveForm.type==1" prop="discount">
            <el-input v-model="saveForm.discount" autocomplete="off" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="活动代金券" v-if="saveForm.type==2" prop="vouchers">
            <el-input v-model="saveForm.vouchers" autocomplete="off" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="saveForm.beginTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="saveForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动简介" prop="info">
            <el-input type="textarea" v-model="saveForm.info" autocomplete="off" style="width:500px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange:[],
      dateRange2:[],
      //查询的数据模型
      searchForm: {
        //过滤条件
        code: null,
        channel: null,
        status: null,
        createdBeginTime: null,
        createdEndTime: null,
        activityBeginTime: null,
        activityEndTime: null,
        
        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      //分页数据模型
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
      //控制对话框显示还是隐藏
      dialogFormVisible: false,
      //新增的数据模型
      saveForm: {
        id:null,
        name:null,
        channel:null,
        info:null,
        type:null,
        discount:null,
        vouchers:null,
        beginTime:null,
        endTime:null,
      },
      //验证数据模型
      rules: {
        channel: [
          { required: true, message: "请选择渠道来源！", trigger: "blur" },
        ],
        info: [
          { required: true, message: "请输入活动简介！", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择活动类型！", trigger: "blur" },
        ],
        discount: [
          { required: true, message: "请输入课程折扣！", trigger: "blur" },
        ],
        vouchers: [
          { required: true, message: "请输入课程代金券！", trigger: "blur" },
        ],
        beginTime: [
          { required: true, message: "请输入活动开始时间！", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请输入活动结束时间！", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.doSearch();
  },
  methods: {
    //查询用户信息
    doSearch() {
      //获取开始时间和结束时间
      if (this.dateRange) {
        this.searchForm.createdBeginTime = this.dateRange[0]
        this.searchForm.createdEndTime = this.dateRange[1]
      }else{
        this.searchForm.createdBeginTime =null;
        this.searchForm.createdEndTime =null;
      }
      //获取开始时间和结束时间
      if (this.dateRange2) {
        this.searchForm.activityBeginTime = this.dateRange2[0]
        this.searchForm.activityEndTime = this.dateRange2[1]
      }else{
        this.searchForm.activityBeginTime =null;
        this.searchForm.activityEndTime =null;
      }
      this.$axios.get("/api/tb/activity/list", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.pageData.pageNo = res.data.data.current;
            this.pageData.pageSize = res.data.data.size;
            this.pageData.totalCount = res.data.data.total;
            this.pageData.totalPageCount = res.data.data.pages;
            this.pageData.data = res.data.data.records;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.doSearch();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.doSearch();
    },
    //清空新增表单数据
    reset () {
      this.saveForm = {
        postId:null,
        postCode:null,
        postName:null,
        status:"0",
        postSort:null,
        remark:null,
      };
    },
    //添加
    handleAdd() {
      //1.清空模型数据
      this.reset();
      //2.显示对话框
      this.dialogFormVisible = true;
    },
    //保存
    doSave() {
      this.$refs["saveForm"].validate((vali) => {
        if (vali) {
          //发送ajax请求
          this.$axios.post("/api/tb/activity/save", this.saveForm)
            .then((res) => {
              if (res.data.code == 200) {
                //1.关闭对话框
                this.dialogFormVisible = false;
                //2.友好提示
                this.$message.success(res.data.msg);
                //3.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    //编辑
    handleEdit(index, row) {
      //1.清空模型数据
      this.reset();
      //2.查询要修改的数据
      this.$axios.get("/api/tb/activity/view/"+row.id).then((res)=>{
         if(res.data.code==200){  
            this.saveForm=res.data.data;
         }else{
            this.$message.error(res.data.msg);
         }
      }).catch((err)=>{
        console.log(err);
      })
      //3.显示对话框
      this.dialogFormVisible=true;
    },
    //删除
    handleDelete(index, row) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //1.发送ajax请求
          this.$axios.delete("/api/tb/activity/del/"+row.id).then((res)=>{
              if (res.data.code == 200) {
                //1.友好提示
                this.$message.success(res.data.msg);
                //2.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
          }).catch((err)=>{
              console.log(err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //通过
    handlePass(index, row) {
      this.$confirm('确认同意吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //1.发送ajax请求
        this.$axios.put("/api/tb/activity/pass",{id:row.id,status:2}).then((res)=>{
            if (res.data.code == 200) {
              //1.友好提示
              this.$message.success(res.data.msg);
              //2.刷新表格
              this.doSearch();
            } else {
              //1.友好提示
              this.$message.error(res.data.msg);
            }
        }).catch((err)=>{
            console.log(err);
        })
      }).catch(() => {      
      });
    },
    //驳回
    handleReject(index, row) {
      this.$confirm('确认驳回吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //1.发送ajax请求
        this.$axios.put("/api/tb/activity/reject",{id:row.id,status:3}).then((res)=>{
            if (res.data.code == 200) {
              //1.友好提示
              this.$message.success(res.data.msg);
              //2.刷新表格
              this.doSearch();
            } else {
              //1.友好提示
              this.$message.error(res.data.msg);
            }
        }).catch((err)=>{
            console.log(err);
        })
      }).catch(() => {      
      });
    },
  },
}
</script>

<style scoped>
</style>

